/*header*/
/*pimg height ptrext me v*/
@media(max-width: 700px){
  *{
    margin: 0px ;
    padding: 0px;
    box-sizing: border-box;
  }
  body{
    margin: 0px;
    overflow-x: hidden;
  }
  .main{
    padding: 0px;
    margin: 0px;
        overflow-x: hidden;

  }
}
@media(max-width: 700px){
  .icon{
    display: inline-block;
  }
  .header{
    margin: 0px;
/*    padding: 10px 0px;*/
  }
  .menu{
    display: none;
    width: 100%;
  }
  .menu ul{
    flex-direction: column;
    background: rgb(76, 131, 145);
    line-height: 60px;
    text-align: center;
    width: 100%;

  }
  .menu ul li a:hover{
    color: indigo;
  }
  .menu.show{
    display: block;
  }
}
/*home*/
@media (max-width: 600px) {
  #home{
        padding: 180px 0px;

  }
  #home h4,  {
    display: block;
    font-size: 18px;
    white-space: normal; /* ab break kar sakta hai agar zarurat ho */
  }
  #home #bb{
    line-height: 50px;
  }
  

}
/*about*/
/*about sir sepuchna he */
@media(max-width:700px){
  .about_width{
    flex-direction: column;
    padding: 20px 0px;
  }
  .aboutcol2{
    text-align: center;
  }

}
@keyframes blink {
  50% { border-color: transparent; }
}

#about {
  text-align: center; /* center alignment for section */
  padding: 80px 0;
  background: linear-gradient(135deg, #fdfbfb, #ebedee, #c9d6ff, #e2e2e2);
}


@keyframes typing {
  from { width: 0; }
  to { width: 9ch; } /* 'About Me' = 8 letters + 1 space */
}

@keyframes blink {
  50% { border-color: transparent; }
}

/* Text type hone ka effect */
@keyframes typing {
  from { width: 0; }
  to { width: 12ch; } /* My Services = 11 letters + space */
}

/* Cursor blink effect */
@keyframes blink {
  50% { border-color: transparent; }
}
/*
skill*/
@media(max-width:1000px){
  .skills{
    padding: 20px;
  }

}
/* 🔹 Tablet View (for screens ≤ 992px) */
@media (max-width: 992px) {
  .project-cols3 {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .project h2 {
    font-size: 1.8rem;
  }

  .ptext h3, .pc3text h3 {
    font-size: 1.1rem;
  }

  .ptext p, .pc3text p {
    font-size: 0.95rem;
  }
}

/* 🔹 Mobile View (for screens ≤ 600px) */
@media (max-width: 600px) {
  .project-cols3 {
    grid-template-columns: 1fr;
    gap: 15px;
    justify-content: center;
  }

  .project {
    padding: 25px 10px;
  }

  .project h2 {
    font-size: 1.5rem;
  }

  .ptext h3, .pc3text h3 {
    font-size: 1rem;
  }

  .ptext p, .pc3text p {
    font-size: 0.9rem;
  }

  .pbtn {
    padding: 7px 14px;
    font-size: 0.9rem;
  }
}
/*contact*/
/* Responsive */
@media (max-width: 992px) {
  .contact-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .form-row input {
    flex: 1 1 100%;
  }
}


/* Responsive Contact Section */
@media (max-width: 1024px) {
  .contact-section {
    flex-direction: column;
    gap: 60px; /* vertical spacing for tablets */
    padding: 30px 20px;
  }

  .contact-info,
  .contact-form-wrap {
    width: 100%;
  }

  .contact-info p {
    width: 100%; /* prevent overflow */
  }
}

@media (max-width: 768px) {
  .contact-section {
    gap: 40px; /* stack vertically with smaller gap */
  }

  .contact-info h2,
  .contact-form h2 {
    font-size: 1.8rem; /* adjust headings */
    max-width: 100%;
  }

  .contact-info p {
    font-size: 0.95rem;
  }

  .captcha-section {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .buttons {
    flex-direction: column;
  }

  button, .btn-secondary {
    flex: 1 1 100%;
  }
}

@media (max-width: 480px) {
  body {
/*    padding: 20px 10px;*/
  }

  .contact-info, .contact-form-wrap {
    padding: 20px;
  }

  .contact-info h2,
  .contact-form h2 {
    font-size: 1.5rem;
  }

  .contact-info p {
    font-size: 0.9rem;
  }

  .captcha-code {
    font-size: 1rem;
    letter-spacing: 2px;
  }

  .buttons {
    gap: 8px;
  }

  button, .btn-secondary {
/*    padding: 10px;*/
    font-size: 0.95rem;
  }
}
@media (max-width: 768px) {
  body {
    padding: 0;
    margin: 0;
  }

  /* Remove unwanted left gap globally */
  * {
    box-sizing: border-box;
  }

  .header {
    padding: 15px 20px;
  }

  #home {
    padding: 100px 20px;
  }

  .about_width {
    flex-direction: column;
    text-align: center;
    padding: 0 20px;
  }

  .aboutcol1 img {
    width: 250px;
    height: 250px;
  }

  /* Fix contact section left spacing */
  .contact-section {
    flex-direction: column;
    gap: 40px;
    padding: 0 20px; /* 🔹 add even padding left-right */
  }

  .contact-info,
  .contact-form-wrap {
    width: 100%; /* full width on small screens */
  }

  .contact-info p {
    width: 100%; /* removes fixed 400px width */
  }

  .contact-info h2,
  .contact-form h2 {
    text-align: center;
  }

  .skills,
  .project-cols2,
  .p3cols,
  .project-cols3 {
    grid-template-columns: 1fr;
    padding: 0 20px;
  }
}